<template>
  <div>
    <a-form :model="formState" ref="smsForm" v-bind="formItemLayout">
      <a-form-item name="serviceName" label="开启短信">
        <a-switch v-model:checked="formState.enable" checked-children="开启" un-checked-children="关闭" />
      </a-form-item>
      <a-form-item name="accessKey" label="accessKey">
        <a-input v-model:value="formState.accessKey" />
      </a-form-item>
      <a-form-item name="accessSecret" label="accessSecret">
        <a-input v-model:value="formState.accessSecret" />
      </a-form-item>
      <a-form-item name="smsTplCode" label="验证码模板">
        <a-input v-model:value="formState.smsTplCode" />
      </a-form-item>
      <a-form-item name="signName" label="签名">
        <a-input v-model:value="formState.signName" />
      </a-form-item>
      <a-form-item name="encryption" label="手机号加密">
        <a-switch v-model:checked="formState.encryption" checked-children="是" un-checked-children="否" />
      </a-form-item>
      <a-form-item name="smsCodeHander" label="自定义验证码处理器">
        <a-input v-model:value="formState.smsCodeHander" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab6" setup>
import { onMounted, ref } from 'vue';
import { getConfig, smsSave } from '../data/config.api';

const ossForm = ref();
const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 10 },
};
const formState = ref({
  enable: false,
  accessKey: '',
  accessSecret: '',
  smsTplCode: '',
  signName: '',
  encryption: false,
  smsCodeHander: '',
});

onMounted(() => {
  setData();
});

/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getConfig({
    configType: 'sms',
  }).then(data => {
    formState.value = JSON.parse(data.SMS_CONFIG);
  });
}

/**
 * 表单提交
 */
async function handleSubmit() {
  smsSave({
    ...formState.value,
  }).then(() => {});
}
</script>
